<template>
    <div>
        <div v-if="!holder">
            <div v-if="!ad.show_title" style="height: 23px"></div>
            <div v-else class="head-panel" >
                <div :style="{width: ad.left + '%'}">

                </div>
                <div class="label">
                    <div class="point">
                        <div :class="{
                            'sp': true,
                            'enable': ad.enable,
                            'active' : ad.enable && ad.active }"></div>
                    </div>
                    <div class="text" @click="onClick">{{ad.ad_title }}</div>
                    <div class="ctrl">
                        <el-button
                                class="button"
                                type="danger"
                                icon="el-icon-delete"
                                @click="onDelete">删除</el-button>
                    </div>
                </div>
            </div>
            <div class="advert-panel">
                <div
                        class="advert-left"
                        :style="{width: ad.left + '%'}">

                </div>
                <div
                        :class="{
                        'advert-now' : true}"
                        :style="{width:ad.right + '%',
                            backgroundColor: '#' + ad.color,
                        }">
                </div>
            </div>
        </div>
        <div v-if="holder" class="holder">

        </div>
    </div>


</template>
<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator'
    import {Api} from '@/api/meta'
    import Filter from '@/libs/filter'

    @Component({
        name: "AdminAdvert",
        filters: Filter
    })
    export default class AdminAdvert extends Vue {

        @Prop({
            required: true,
            type: Object | null,
        })
        ad;

        @Prop({
            required: true,
            type: Boolean
        })
        holder;

        onClick() {
            this.$router.push({
                path: `/advert/view/${this.ad.ad_id}`
            })
        }

        onDelete() {
            this.$confirm(`此操作将永久删除(${this.ad.ad_title}), 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                Api.Meta.DeleteAdvert({ad_id:this.ad.ad_id})
                    .then((ack) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        this.$emit('delete', this.ad.ad_id)
                    })
                    .catch(() => {

                    })

                })
                .catch(() => {
                 });
        }


        mounted() {

        }
    }
</script>

<style lang="scss" scoped>

    $panel-height: 2px;
    .advert-panel {
        width: 100%;
        height: $panel-height;
        display: flex;
        flex-direction: row;
    }

    .head-panel {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .advert-left {
        height: $panel-height;
    }

    .advert-now {
        height: $panel-height;
        background: #909399;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }




    .label {

        display: flex;
        flex-direction: row;
        padding-left: 2px;

        &:hover > .ctrl {
            visibility: visible;
        }

        .ctrl {
            visibility: hidden;
            padding-left: 5px;

            .button {
                padding: 2px;
                font-size: 10px !important;
            }
        }

        .text {
            padding-left: 4px;
            font-size: 14px;
            text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

            &:hover {
                color: #409EFF;
                cursor: pointer;
            }
        }
    }



    .holder {
        height: 25px;
    }

    .point {
        display: flex;
        flex-direction: row;
        align-items: center;
        .sp {
            width: 3px;
            height: 3px;
            content: " ";
            border: 3px solid #F56C6C; /*设置红色*/
            border-radius: 3px; /*设置圆角*/

            z-index: 1000;
        }

        .enable {
            border: 3px solid #67C23A;
        }

        .active {
            border: 3px solid #409EFF;
        }
    }
</style>